<template>
  <div id="t-progress">
    <div class="title-wrap">
        <div class="title-text">
            <img src="../../assets/img/tProgress_icon.png" alt="" />
            <span>授课进度</span>
        </div>
        <div class="title-btns">
            <img src="../../assets/img/mini-w.png" @click="windowMin" alt="" />
            <img src="../../assets/img/close-w.png" @click="windowClose" alt="" />
        </div>
    </div>
    <!-- <home-container metaId="tProgress" bgType="tProgress" @beforeClose="beforeClose"> -->
      <div class="container align-center">
        <div class="tips" style="position:absolute;top:80px;left:20px;font-size: 16px;color: #303133;z-index:999">单击任一章节更改班级的授课进度</div>
        <div class="header flex-center">
          <div class="tools flex-center" style="-webkit-app-region: no-drag;">
            <el-select v-model="classVal" placeholder="请选择班级" @change="activeClassChange">
              <el-option style="-webkit-app-region: no-drag;" v-for="item in classList" :key="item.id + '_classVal'" :label="item.className" :value="item.id"> </el-option>
            </el-select>
            <div class="set-class" @click="showClassDialog">
              <img src="../../assets/img/setClass.png" alt="" class="set-class-img" />
              <span class="tips">班级管理</span>
            </div>
          </div>
        </div>
        <div class="content align-start">
          <div
            :class="['line', { 'odd-line': index % 2 === 0 && getCurrentPath(index).length >= 5 }, { 'even-line': index % 2 !== 0 && getCurrentPath(index).length >= 5 }, index % 2 === 0 ? 'flex-start' : 'flex-end']"
            v-for="(item, index) in lineNum"
            :key="item + '_line'"
          >
            <div class="line-item" v-for="(point, pointIndex) in getCurrentPath(index)" :key="point.name + pointIndex">
              <div class="flex-center">
                <el-popover placement="bottom" width="80" trigger="manual" :value="!once && activeLeson === point.id">
                  <div class="flex-center">
                    <a href="#" style="color: #409eff;" @click="setMessage">
                      打开课程

                    </a>
                  </div>
                  <template slot="reference">
                    <div :style="index + pointIndex === 0 ? 'transform: translateX(-40px);' : ''" :class="['point-sign', point.type, { active: activeLeson === point.id }]" @click="setActiveLesson(point)">
                      {{ point.label }}
                    </div>
                  </template>
                </el-popover>
                <div :style="index + pointIndex === 0 ? 'transform: translateX(-40px);' : ''" :class="['point-sign-lesson', point.type === 'chapter' ? 'chapter-sign' : '', { 'lesson-sign-ac': activeLeson === point.id }]">
                  {{ point.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="class-dialog flex-center" v-show="classDialog">
        <div class="class-container align-center">
          <div class="class-header flex-between">
            <span class="s-18">
              班级管理
            </span>
            <img class="close" src="../../assets/img/close-table.png" alt="" @click="closeClassDialog" />
          </div>
          <div class="class-content">
            <el-table :data="classList" style="width: 100%;">
              <el-table-column label="序号" width="50px" type="index" align="center"></el-table-column>
              <el-table-column label="班级" align="center">
                <template slot-scope="scope">
                  <div v-if="rowEdit === scope.$index" class="flex-around">
                    <el-select size="small" v-model="grade" placeholder="请选择班级" @change="gradeChange('grade', scope)" style="width: 150px;">
                      <el-option v-for="(item, inedx) in classSet" :key="item + inedx" :label="item" :value="item"> </el-option>
                    </el-select>
                    <el-input style="width: 150px;" size="small" v-model="classSuffix" placeholder="请输入班级名称" @change="gradeChange('className', scope)" v-arouse> </el-input>
                  </div>
                  <span v-else>{{ scope.row.className }}</span>
                </template>
              </el-table-column>
              <el-table-column label="教材版本" align="center" width="180px">
                <template slot-scope="scope">
                  <div v-if="rowEdit === scope.$index">
                    <el-select size="small" v-model="classBookId" placeholder="请选择教材版" @change="val => bookChange(val, scope.row)">
                      <el-option-group v-for="group in bookSetForGrade" :key="group.label" :label="group.label">
                        <el-option v-for="item in group.book" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                      </el-option-group>
                    </el-select>
                  </div>
                  <span v-else :key="scope.row.id">{{ publishVersion(scope.row.bookId) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="100px">
                <template slot-scope="scope">
                  <template v-if="!adding">
                    <el-button type="text" v-if="rowEdit === scope.$index && scope.row.id" @click="changeCurrentClassMessage(scope.row)">完成</el-button>
                    <el-button type="text" v-if="rowEdit !== scope.$index && scope.row.id" @click="edditClassMessage(scope.$index)">编辑</el-button>
                    <el-button type="text" v-if="rowEdit === -1" style="color: #f66c6c;" @click="deleteClass(scope.$index, scope.row)">删除</el-button>
                  </template>
                  <template v-else>
                    <el-button type="text" v-if="!scope.row.id" @click="insertUserClass(scope.row)"> 添加</el-button>
                    <el-button type="text" v-if="!scope.row.id" style="color: #f66c6c;" @click="deleteClass(scope.$index, scope.row)">删除</el-button>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="class-footer" :class="{ 'class-footer-dis': rowEdit !== -1 }" @click="addClass">
            <span class="footer-handel add">+</span>
            <span class="footer-handel tips">新增班级</span>
          </div>
        </div>
      </div>

      <!-- 备忘录 -->
      <div :class="['memo', memoUp ? 'memo-up' : 'memo-down']">
        <div class="class-header flex-between">
          <span class="s-16">
            备忘录
          </span>
          <div>
            <i class="el-icon-caret-top" v-if="memoUp" @click="memoUp = false"></i>
            <i class="el-icon-caret-bottom" v-else @click="memoUp = true"></i>
          </div>
          <!-- <img class="close" src="../../assets/img/close-table.png" alt="" @click="closeClassDialog"> -->
        </div>
        <el-input v-arouse resize="none" :rows="7" type="textarea" v-model="memo" show-word-limit placeholder="请输入内容" :maxlength="50"></el-input>
        <div class="res-button flex-center" style="margin-top: 10px;">
          <el-button size="small" type="primary" @click="updateMemo">保存</el-button>
        </div>
      </div>
    <!-- </home-container> -->
  </div>
</template>

<script>
import mixin from '../../mixin/mixin'
import { UserClassList } from '../../../../../static/lib/sqlite/model/UserClassList'
import { SqlLibBook } from '../../../../../static/lib/sqlite/service/SqlLibBook'
import { SqlLibUser } from '../../../../../static/lib/sqlite/service/SqlLibUser'
import { SqlLib } from '../../../../../static/lib/sqlite/SqlLib'
import { UUIDUtil } from '../../../../../static/utils/UUIDUtil'
import homeContainer from '../../components/background'
import { getChapterLessonByBookId, queryTeachProgress, createTeachProgress } from '../../api/lesson'
let cachePathMap = new Map()
const messgae = new BroadcastChannel('t-progess-message') //跨页面消息
let cacheClassBookId = '' // 用来缓存bookId在新增班级时使用
const keyMap = ['publishName', 'isActive', 'currentLesson', 'bookId', 'className', 'reverse1', 'userId', 'id']
export default {
  // mixins: [mixin],
  name: 'tProgress',
  components: { homeContainer },
  data() {
    return {
      classList: [],
      classVal: null, //初始值不能为空字符串
      pointList: [],
      numToZh: ['一', '二', '三', '四', '五', '六', '七'],
      lineNum: 0,
      activeLeson: '',
      classDialog: false,
      rowEdit: -1,
      classSet: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
      grade: '',
      classSuffix: '',
      bookList: [],
      bookSetForGrade: [],
      classBookId: '',
      adding: false, //是否正在添加班级
      memo: '', //备忘录
      once: true,
      memoUp: true //备忘录是否展开
    }
  },
  mounted() {
    //异步执行IO操作
    // let options = {
    //   title: '加载资源中',
    //   progress: false,
    //   full: true,
    //   background: 'rgba(0,0,0,0.4)'
    // }
    // this.loadingMask = this.$loadingmask(options)
    // this.loadingMask = this.$loadingmask(options)
    // this.loadingMask.close()
    const isOffline = localStorage.getItem('isOffline')
    if (isOffline === 'false') {
      this.queryTeachProgress()
    } else {
      this.queryUserClassList()
      this.queryAllUserBook()
    }
  },
  watch: {
    classBookId(nval) {
      this.getChapterByBookId(nval)
    }
  },
  methods: {
    async queryTeachProgress() {
      let options = {
        title: '加载资源中',
        progress: false,
        full: true,
        background: 'rgba(0,0,0,0.4)'
      }
      this.loadingMask = this.$loadingmask(options)
      const { code, returnValue } = await queryTeachProgress()
      if (code === '0') {
        const classList = []
        if (returnValue[0]) {
          const resJson = returnValue[0].recJson && JSON.parse(returnValue[0].recJson)
          this._id = returnValue[0].id
          if (!resJson) return
          const sqlLib = SqlLib.getInstance(window.$DBDIR)
          resJson.forEach(item => {
            let v = new UserClassList()
            v = Object.assign(v, item)
            classList.push(v)
            sqlLib.updateOrInsertObjectById(v)
          })
          console.log(returnValue)
        }
        this.queryUserClassList(classList)
        this.queryAllUserBook()
        this.loadingMask.close()
      }
    },
    async beforeClose() {
      await this.upload()
    },
    async upload() {
      const data = this.classList.map(item => {
        const obj = {}
        keyMap.forEach(key => {
          obj[key] = item[key]
        })
        return obj
      })
      const params = {
        recJson: data
      }
      if (this._id) {
        params.id = this._id
      }
      const { code } = await createTeachProgress({ teachProgressDTOS: params })
      if (code === '0') {
      }
    },
    showClassDialog() {
      this.classDialog = true
      this.once = true
    },
    closeClassDialog() {
      if (this.adding) {
        this.classList.pop()
        this.adding = false
        this.rowEdit = -1
        this.initSet()
      }
      this.classDialog = false
      this.once = false
    },

    publishVersion(bookId) {
      let versionName = ''
      this.bookList.some(item => {
        item.book.some(book => {
          if (book.id === bookId) {
            versionName = book.name
          }
          return versionName
        })
        return versionName
      })
      return versionName
    },

    queryUserClassList(classList = []) {
      console.log('queryUserClassList')
      const sqlLib = SqlLib.getInstance(window.$DBDIR)
      this._user = SqlLibUser.queryCurrentUser(sqlLib)
      if (classList.length > 0) {
        this.classList = classList
        SqlLibUser.queryUserClassList(sqlLib, this._user.id)
      } else {
        this.classList = SqlLibUser.queryUserClassList(sqlLib, this._user.id)
        if (this.classList.length <= 0) {
          this.classDialog = true
          return
        }
      }
      let cid = localStorage.getItem('activeClass')
      this.classList.some(item => {
        if (cid) {
          if (item.id === cid) {
            this.classVal = item.id
            this.activeLeson = item.currentLesson
            this.classBookId = item.bookId
            this.memo = item.reverse1
            this.getChapterByBookId(item.bookId)
            return true
          }
        } else {
          if (item.isActive === '1') {
            this.classVal = item.id
            this.activeLeson = item.currentLesson
            this.classBookId = item.bookId
            this.memo = item.reverse1
            this.getChapterByBookId(item.bookId)
            return true
          }
        }
        return false
      })
    },
    getChapterByBookId(bookId) {
      //缓存处理
      if ((this.pointList = cachePathMap.get(this.classVal))) {
        let length = 0
        this.pointList.forEach(item => (length += item.length))
        this.lineNum = Math.ceil(length / 5)
        return
      }
      const sqlLib = SqlLib.getInstance(window.$DBDIR)
      const chapterList = SqlLibBook.queryChapterLessonByBookId(sqlLib, bookId)
      let pointList = []
      if (Array.isArray(chapterList)) {
        chapterList.forEach((chapter, index) => {
          pointList.push({
            label: `第${this.numToZh[index]}单元`,
            name: chapter.name,
            id: chapter.id,
            type: 'chapter'
          })
          if (Array.isArray(chapter.lessonVO)) {
            chapter.lessonVO.forEach((lesson, index) => {
              pointList.push({
                label: index + 1,
                name: lesson.name,
                id: lesson.id,
                type: 'lesson'
              })
            })
          }
        })
      } else {
        getChapterLessonByBookId({ bookId: bookId }).then(res => {
          if (res.code === '0') {
            res.returnValue.forEach((chapter, index) => {
              pointList.push({
                label: `第${this.numToZh[index]}单元`,
                name: chapter.name,
                id: chapter.id,
                type: 'chapter'
              })
              if (Array.isArray(chapter.lessonVOList)) {
                chapter.lessonVOList.forEach((lesson, index) => {
                  pointList.push({
                    label: index + 1,
                    name: lesson.name,
                    id: lesson.id,
                    type: 'lesson'
                  })
                })
              }
            })
          }
          this.lineNum = Math.ceil(pointList.length / 5)
          this.pointList = []
          while (pointList.length > 0) {
            this.pointList.push(pointList.splice(0, 5))
          }
          if (this.classVal) {
            cachePathMap.set(this.classVal, this.pointList)
          }
        })
      }
      this.lineNum = Math.ceil(pointList.length / 5)
      this.pointList = []
      while (pointList.length > 0) {
        this.pointList.push(pointList.splice(0, 5))
      }
      if (this.classVal) {
        cachePathMap.set(this.classVal, this.pointList)
      }
    },

    queryAllUserBook() {
      const sqlLib = SqlLib.getInstance(window.$DBDIR)
      const allPublishe = SqlLibBook.queryPublisher(sqlLib, this._user.eduLevelId)
      let bookList = []
      if (Array.isArray(allPublishe)) {
        allPublishe.forEach(item => {
          const list = SqlLibBook.queryBookByEitionId(sqlLib, item.id)
          list && bookList.push({ label: item.name, book: [...list] })
        })
      }
      this.bookList = bookList
    },

    getCurrentPath(i) {
      if (i % 2 === 0) return this.pointList[i]
      return JSON.parse(JSON.stringify(this.pointList[i])).reverse()
    },

    updateMemo() {
      if (!this.classVal) {
        this.$message.error('请先选择班级')
        return
      }
      let updateParams = {
        data: { reverse1: this.memo },
        id: this.classVal
      }
      this.classList.some(item => {
        if (item.id === this.classVal) {
          item.reverse1 = this.memo
          return true
        }
      })
      this.updateClassMessageInDB(updateParams.data, updateParams.id, this._user.id)
      this.$message.success('保存成功')
    },

    activeClassChange(val) {
      localStorage.setItem('activeClass', val)
      this.once = true
      //TODO:未修改其它班级的active属性
      let currentClass = null
      this.classList.some(item => {
        if (item.id === val) {
          currentClass = item
          let obj = null
          if ((obj = cachePathMap.get(item.id))) {
            obj.currentLesson = currentClass.currentLesson
            cachePathMap.set(item.id, obj)
          }
          return true
        }
        return false
      })

      if (currentClass) {
        this.activeLeson = currentClass.currentLesson
        this.classBookId = currentClass.bookId
        this.memo = currentClass.reverse1
        this.getChapterByBookId(currentClass.bookId)
        //更新数据库暂不做节流处理
        const data = { isActive: 1 }
        this.updateClassMessageInDB(data, currentClass.id, currentClass.userId)
      } else {
        this.activeLeson = ''
        this.classBookId = ''
        this.memo = ''
      }
    },

    setActiveLesson(point) {
      if (this.once) this.once = false
      if (this._timeOut) clearTimeout(this._timeOut)
      if (point.type === 'chapter') return
      this.activeLeson = point.id
      let updateParams = {
        data: { currentLesson: this.activeLeson },
        id: this.classVal
      }
      this.classList.some(item => {
        if (item.id === this.classVal) {
          item.currentLesson = this.activeLeson
          return true
        }
        return false
      })
      this._timeOut = setTimeout(() => {
        this.updateClassMessageInDB(updateParams.data, updateParams.id, this._user.id)
      }, 1500)
    },

    gradeChange(type, scope) {
      const index = scope.$index
      if (type === 'grade') {
        cachePathMap.delete(scope.row.id)
        if (Array.isArray(this.bookList)) {
          const cacheBookList = JSON.parse(JSON.stringify(this.bookList))
          this.bookList.forEach(item => {
            item.book = item.book.filter(book => {
              return book.name.includes(this.grade)
            })
          })
          this.bookSetForGrade = this.bookList.filter(item => {
            return item.book.length > 0
          })
          const firstClass = this.classList[0] || {}
          let firstVersion = this.bookSetForGrade.filter(item => {
            return item.label === firstClass.publishName
          })[0]
          let dateNow = new Date()
          if (3 < dateNow.getMonth() + 1 && dateNow.getMonth() + 1 < 8) {
            this.classBookId = firstVersion && firstVersion.book[1].id
          } else {
            this.classBookId = firstVersion && firstVersion.book[0].id
          }
          this.bookList = cacheBookList
        }
      }
      this.classList[index] && (this.classList[index].className = this.grade + this.classSuffix)
    },
    bookChange(val, row) {
      this.ac
      cachePathMap.delete(row.id)
      // this.classBookId = val.id
      this.getChapterByBookId(val)
    },

    edditClassMessage(index) {
      const classItem = this.classList[index] || {}
      this.classBookId = classItem.bookId
      this.grade = classItem.className && classItem.className.substr(0, 3)
      this.classSuffix = classItem.className && classItem.className.substr(3)
      if (Array.isArray(this.bookList)) {
        const cacheBookList = JSON.parse(JSON.stringify(this.bookList))
        this.bookList.forEach(item => {
          const bookId = classItem.bookId
          item.book = item.book.filter(book => {
            return book.name.includes(this.grade)
          })
        })
        this.bookSetForGrade = this.bookList.filter(item => {
          return item.book.length > 0
        })
        this.bookList = cacheBookList
      }
      this.rowEdit = index
    },

    addClass() {
      cacheClassBookId = this.classBookId
      this.classBookId = ''
      if (this.rowEdit !== -1) return
      this.adding = true
      this.rowEdit = this.classList.length
      this.classList.push(new UserClassList())
    },

    deleteClass(index, row) {
      if (!row.id) {
        cacheClassBookId ? (this.classBookId = cacheClassBookId) : ''
        this.rowEdit = -1
        this.grade = ''
        this.classSuffix = ''
        this.classList.splice(index, 1)
        this.$message.success('删除成功')
        this.adding = false
        return
      }
      const sqlLib = SqlLib.getInstance(window.$DBDIR)
      const res = SqlLibUser.deleteOneClassById(sqlLib, row.id, row.userId)
      if (res !== 'sql error') {
        this.classList.splice(index, 1)
        this.$message.success('删除成功')
        if (this.classList.length <= 0) {
          this.lineNum = 0
          this.classVal = null
          this.activeClassChange('')
          return
        }
        if (row.id === this.classVal) {
          if (index < this.classList.length) {
            this.activeClassChange((this.classVal = this.classList[index].id))
          }
          if (index === this.classList.length) {
            this.activeClassChange((this.classVal = this.classList[index - 1].id))
          }
        }
      } else {
        this.$message.error('删除失败，请重试')
      }
    },

    changeCurrentClassMessage(row) {
      if (this.grade === '' || this.classSuffix === '') {
        this.$message.error('请填写完整的班级')
        return
      }
      const className = this.grade + this.classSuffix
      if (className === row.className && this.classBookId === row.bookId) {
        // this.$message.success('修改成功')
        this.initSet()
        this.rowEdit = -1
        return
      }
      row.bookId = this.classBookId
      row.className = className
      let publishName = ''
      this.bookSetForGrade.some(item => {
        item.book.some(book => {
          if (book.id === this.classBookId) {
            publishName = item.label
          }
          return publishName
        })
        return publishName
      })

      const data = { className: className, bookId: this.classBookId, publishName: publishName }
      //更新数据库
      const res = this.updateClassMessageInDB(data, row.id, row.userId)
      if (res !== 'sql error') this.$message.success('修改成功')
      else this.$message.error('修改失败请重试')
      this.initSet()
      this.rowEdit = -1
    },

    updateClassMessageInDB(data, id, userId) {
      const sqlLib = SqlLib.getInstance(window.$DBDIR)
      const res = SqlLibUser.updateOneClassById(sqlLib, data, id, userId)
      return res
    },

    insertUserClass(row) {
      if (this.grade === '' || this.classSuffix === '') {
        this.$message.error('请填写完整的班级')
        return
      }
      const className = this.grade + this.classSuffix
      if (this.classList.some(item => item.className === className && item.id)) {
        this.$message.error(`${className}班级名已存在`)
        return
      }
      let publishName = ''
      this.bookSetForGrade.some(item => {
        item.book.some(book => {
          if (book.id === this.classBookId) {
            publishName = item.label
          }
          return publishName
        })
        return publishName
      })[0]
      const sqlLib = SqlLib.getInstance(window.$DBDIR)
      row.userId = this._user.id
      row.bookId = this.classBookId
      row.publishName = publishName
      row.id = UUIDUtil.uuid()
      const res = sqlLib.insertObject(row)
      debugger
      if (res !== 'sql error') {
        this.$message.success('添加成功')
      } else {
        this.classList.pop()
        this.$message.error('添加失败')
      }
      if (this.classList.length === 1) {
        this.classVal = row.id
        this.activeClassChange(row.id)
      }
      this.initSet()
      this.adding = false
      this.rowEdit = -1
    },

    initSet() {
      this.grade = ''
      this.classSuffix = ''
      // this.classBookId = ''
    },

    setMessage() {
      let bookId = ''
      this.classList.some(item => {
        if (item.id === this.classVal) {
          bookId = item.bookId
          return true
        }
        return false
      })
      if (!bookId || !this.activeLeson) return
      messgae.postMessage({
        bookId: bookId,
        lessonId: this.activeLeson
      })
    },
    windowMin() {
      this.$electron.ipcRenderer.send("resource-window-minimize", {
        metaId: "tProgress",
      });
    },
    async windowClose() {
      await this.upload()
      this.$electron.ipcRenderer.send("close-resource-window", {
        metaId: "tProgress",
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.el-popover {
  min-width: 80px !important;
  padding: 5px !important;
}
#t-progress {
  background: none;
  .title-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-image: url("../../assets/img/title_bg.png");
    background-size: cover;
    -webkit-app-region: drag;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-sizing: border-box;
    z-index: 98;

    .title-text {
      display: flex;
      align-items: center;
        img{
            margin-right: 8px;
            width: 20px;
            height: 20px;
        }
        span {
            font-size: 18px;
            color: #fff;
        }
    }

    .title-btns {
      -webkit-app-region: no-drag;
        img {
            width: 14px;
            height: 14px;
            margin-left: 18px;
            cursor: pointer;
        }
    }
  }
  .container {
    width: 100%;
    height:100vh;
    background-image: url(../../assets/img/tProgress-bg.png);
    background-size: cover;
    overflow-x: hidden;
    .header {
      width: 100%;
      margin-top: 64px;
      text-align: center;
      position: relative;
      .title {
        font-size: 36px;
        color: #fff;
        margin-bottom: 16px;
      }
      .tips {
        font-size: 16px;
        color: #303133;
        // opacity: 0.7;
      }
      .tools {
        position: absolute;
        right: 90px;
        .set-class {
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-left: 16px;
          .set-class-img {
            cursor: pointer;
            width: 24px;
            height: 23px;
            margin-right: 10px;
          }
        }
      }
    }
    .content {
      display: inline-block;
      max-height: 700px;
      overflow: scroll;
     
      width: 100%;
      padding: 0 100px;
      padding-top: 50px;
      transform: translateX(200px);
      .line {
        height: 50px;
        width: 70%;
        position: relative;
        background: url(../../assets/img/b-line.png);
        background-size: cover;
        background-repeat: no-repeat;
        // border-radius: 4px;
        &:not(:nth-child(1)) {
          margin-top: 145px;
        }
        &::before {
          content: '';
          background: url(../../assets/img/l-semicircle.png);
          background-size: cover;
          background-repeat: no-repeat;
          position: absolute;
          width: 100px;
          height: 250px;
          left: -99px;
          top: -3px;
          display: none;
        }
        &::after {
          content: '';
          background: url(../../assets/img/l-semicircle.png);
          background-size: cover;
          background-repeat: no-repeat;
          position: absolute;
          transform: rotateY(180deg);
          width: 100px;
          height: 249px;
          right: -100px;
          top: -1px;
          display: none;
        }
      }
      .odd-line {
        &::after {
          display: block;
        }
      }
      .even-line {
        &::before {
          display: block;
        }
      }
      .line-item {
        width: 24%;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #303133;
      }
      .point-sign {
        text-align: center;
      }
      .point-sign-lesson {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 110px;
        cursor: default;
      }
      .chapter-sign {
        font-weight: bold;
      }
      .lesson-sign-ac {
        font-weight: bold;
        color: rgb(249, 179, 71);
      }
      .chapter {
        background: url(../../assets/img/c-point.png) no-repeat;
        background-size: cover;
        width: 120px;
        height: 120px;
        line-height: 120px;
        font-weight: bold;
      }
      .lesson {
        background: url(../../assets/img/l-point.png) no-repeat;
        background-size: cover;
        width: 60px;
        height: 60px;
        line-height: 60px;
        cursor: pointer;
        outline: none;
      }
      .active {
        background: url(../../assets/img/a-point.png) no-repeat;
        background-size: cover;
        width: 60px;
        height: 60px;
        line-height: 60px;
        transform: scale(1.15);
        margin: 5px;
        outline: none;
      }
    }
  }
  .class-dialog {
    width: 100vw;
    height: 100vh;
    background-color: rgba(#000, 0.7);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    .class-container {
      width: 740px;
      max-height: 620px;
      background-color: #ffffff;
    }
    .class-header {
      background: #f4f4f4;
      padding: 0 25px;
      height: 45px;
      margin-bottom: 25px;
      width: 100%;
      .close {
        width: 14px;
        height: 15px;
        cursor: pointer;
      }
    }
    .class-content {
      padding: 0 25px;
      overflow: scroll;
      width: 100%;
    }
    .class-footer {
      margin: 20px 25px;
      border: 1px #4995ff dotted;
      color: #4995ff;
      text-align: center;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      width: 95%;
    }
    .class-footer-dis {
      border: 1px #ccc dotted;
      color: #ccc;
      cursor: no-drop;
    }
    .footer-handel {
      font-size: 18px;
      margin-right: 5px;
    }
    .add {
      font-weight: 600;
    }
  }
  .memo {
    position: absolute;
    left: 50px;
    top: 30vh;
    width: 200px;
    height: 250px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 2px 1px #ccc;
    transition: all 0.7s ease;
    textarea {
      border: none !important;
      outline: none !important;
    }
    .class-header {
      background: #f4f4f4;
      padding: 0 10px;
      height: 30px;
      margin-bottom: 10px;
      .close {
        width: 10px;
        height: 10px;
        cursor: pointer;
      }
    }
  }
  .memo-up {
    height: 250px;
    width: 200px;
  }
  .memo-down {
    height: 30px;
    width: 100px;
  }
}
</style>
